{{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
{{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
{{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
{{- hideAi := CookieList["pixivfe-HideArtAI"] }}
{{- AiType := isset(.AiType) ? .AiType : 0}}
<div class="position-relative h-100 thumbnail-hover-dark">
  <!-- Placing the anchor element out here so that the div that contains the tags acts as a hyperlink -->
  <a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
  <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
    <div class="d-flex flex-column align-items-start z-3">
      <!-- When an artwork is listed on the ranking page -->
      {{- if isset(.Rank) }}
      <span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
      {{- end }}
      <!-- When an artwork is tagged as R-18 or R-18G -->
      {{- if .XRestrict != 0 }}
      <span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
      {{- end }}
      <!-- When an artwork is tagged as AI-generated -->
      {{- if AiType == 2 }}
      <span class="badge bg-warning small text-dark mb-1">AI</span>
      {{- end }}
    </div>
    <div class="d-flex flex-column align-items-end z-3">
      <!-- When an artwork has multiple images -->
      {{- if .Pages > 1 }}
      <span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
      {{- end }}
    </div>
  </div>
    <div class="ratio ratio-1x1">
      <div class="thumbnail-wrapper rounded overflow-hidden">
        {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
        <!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
        <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
        <!-- When the user has enabled hideAi, display a plain thumbnail instead -->
        {{- else if AiType == 2 && hideAi }}
        <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
        {{- else }}
        <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
        {{- end }}
      </div>
    </div>
    <!-- When an artwork is a ugoira -->
    <!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.
         The play icon is centered within this overlay and appears on top of the thumbnail. -->
    {{- if .IllustType == 2 }}
    <div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
      <i class="bi bi-play-fill text-white fs-2"></i>
    </div>
    {{- end }}
  </a>
</div>
